<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ajax 跨域</title>
   <script src="../../../js/jquery-1.11.3.js"></script>

   <style>
      body {
         margin: 3rem;
      }
   </style>
</head>

<body>
   <h2>jsonp 解决跨域</h2>
   <form action="http://127.0.0.1:3000/test">
      <button class="btn btn-warning">form提交</button>
   </form>
   <button class="btn btn-success">ajax 提交</button> <br>
   <h3></h3>
   <script>
      $(".btn-success").click(function () {
         //ajax提交到3000 会出现跨域报错
         //CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
         $.ajax({
            url: "http://127.0.0.1:3000/test",     
            type: "get",
            // dataType:'json', // 不要写json,要写jsonp
            dataType:'jsonp',
            success: function (result) {
               console.log(result);
               $("h3").html(result.name)
            },
            error: function (err) {
               console.log("error");
            }
         });
         
         // var url = 'http://127.0.0.1:3000/test?callback=?'
         // $.getJSON(url, function (result) {  
         //    console.log(result);
         // })
      });
   </script>
</body>

</html>